<template>
    <div @click="closeContextMenu($event)" @contextmenu="closeContextMenu($event)">
        <!-- <div class="pageHeader">
            <div class="pageNameBox">
                <img src="@/assets/image/files/lb.png" alt="" />
                <el-select v-model="value" placeholder="请选择">
                    <el-option label="开发项目集" value="开发项目集"> </el-option>
                </el-select>
                <div class="headerBrns">
                    <el-button type="primary" @click="openMask">新增文件集</el-button>
                </div>
            </div>
        </div> -->
        <!-- <div class="detailsBox">
            <div class="detailsTitle">
                <div class="detailsText">文件夹</div>
                <div>
                    <el-button class="titlesBrn" type="primary" @click="dialogVisible = true">上传文件</el-button>
                </div>
            </div>
            <div class="filesBox">
                <div class="filesItems" v-for="item in 12" :key="item">
                    <img src="@/assets/image/files/wjj.png" alt="" class="filesItemsImg" />
                    <div class="filesItemsName">智慧城市</div>
                </div>
            </div>
        </div> -->
        <div class="detailsBox">
            <div class="detailsTitle">
                <div class="detailsText">{{ $route.query.name ? $route.query.name : '文档' }}</div>
                <div>
                    <!-- <el-button class="titlesBrn">移动</el-button> -->
                    <el-upload class="upload-demo" action="#" :show-file-list="false" list-type="picture" :http-request="upLoadFiles">
                        <el-button class="titlesBrn" type="primary" size="mini">上传文档</el-button>
                    </el-upload>
                </div>
            </div>
            <div v-if="pageData && pageData.items.length > 0">
                <div class="filesBox">
                    <div class="filesItems" v-for="item in pageData.items" :key="item.fileId" title="">
                        <img src="@/assets/image/files/wd.png" alt="" class="filesItemsImg" @contextmenu="openContextmenu($event, item)" />
                        <div class="filesItemsName" :title="item.fileName">{{ item.fileName }}</div>
                        <!-- <div class="functionMask">
                            <i class="el-icon-download" title="下载" @click="downloadFiles(item)"></i>
                            <i class="el-icon-search" title="预览"></i>
                            <i class="el-icon-delete" title="删除" v-if="$isAdmin()"></i>
                        </div> -->
                    </div>
                </div>
                <pagination :totalNum="pageData.totalNum" @paginaClick="paginaClick" :pageSize="queryData.pageSize"></pagination>
            </div>
            <div v-else>
                <el-empty :image-size="200"></el-empty>
            </div>
        </div>
        <!-- <iframe src="http://192.168.0.108:9080/static/测试/management字典.txt" type=""></iframe> -->
        <!-- mask -->
        <!-- <el-dialog title="新建文件夹" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
            <div>
                <el-form ref="form" :model="form" label-width="110px">
                    <el-form-item label="上级文件夹">
                        <el-input v-model="form.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="文件夹名称">
                        <el-input v-model="form.name" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog> -->
        <contextMenu v-if="contextMenuData.isShow" :position="contextMenuData.position" :menuData="contextMenuData.menuData" @handleMenu="handleMenu" />
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
import contextMenu from '../../components/contextMenu.vue'
import publicFunction from '../../utils/publicFunction'
export default Vue.extend({
    components: { contextMenu },
    data() {
        return {
            // tableData: [{}, {}],
            dialogVisible: false,
            // value: '',
            // form: {
            //     type: []
            // },
            queryData: {
                page: 1,
                pageSize: 45,
                folderId: ''
            },
            pageData: '',
            contextMenuData: {
                isShow: false,
                position: {
                    x: '',
                    y: ''
                },
                menuData: [
                    {
                        icon: 'el-icon-download',
                        name: '下载',
                        type: '1'
                    },
                    {
                        icon: 'el-icon-search',
                        name: '预览',
                        type: '2'
                    }
                ]
            },
            rightClickData: ''
        }
    },
    mounted() {
        // console.log((this as any).$route)
        ;(this as any).queryData.folderId = (this as any).$route.params.id
        ;(this as any).getFiles()
    },
    watch: {},
    methods: {
        getFiles() {
            ;(this as any).$request.get('/api/oa/file/list', this.queryData).then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).pageData = res.data
                    // console.log(res.data)
                }
            })
        },
        paginaClick(val: string | number) {
            ;(this as any).queryData.page = val
            ;(this as any).getFiles()
        },
        upLoadFiles(e: File) {
            if ((this as any).$isAdmin()) {
                const files: any = (e as any).file
                let formdata = new FormData()
                formdata.append('file', files)
                formdata.append('folderId', (this as any).$route.params.id)
                ;(this as any).$request.uploading('/api/oa/file/uploadFile', formdata).then((res: any) => {
                    if (res.code == 200) {
                        ;(this as any).$message.success('上传成功')
                        ;(this as any).getFiles()
                    }
                })
            } else {
                ;(this as any).$alert('你无权进行此操作！请联系管理员')
            }
        },
        downloadFiles(item: any) {
            window.location.href = item.fileUrl
        },
        openContextmenu(e: any, item: any) {
            // console.log(e)
            e.stopPropagation()
            if (window.Event) {
                if (e.which == 2 || e.which == 3) {
                    e.returnValue = false
                    ;(this as any).contextMenuData.isShow = true
                    ;(this as any).contextMenuData.position.x = e.x
                    ;(this as any).contextMenuData.position.y = e.y
                    if ((this as any).$isAdmin() && (this as any).contextMenuData.menuData.length == 2) {
                        const data1 = {
                            icon: 'el-icon-delete',
                            name: '删除',
                            type: '3'
                        }
                        ;(this as any).contextMenuData.menuData.push(data1)
                    }
                    ;(this as any).rightClickData = item
                    return false
                }
            }
        },
        handleMenu(type: any) {
            ;(this as any).contextMenuData.isShow = false
            const items = (this as any).rightClickData
            // console.log(items)
            if (type == '1') {
                // 下载
                window.location.href = items.fileUrl
            } else if (type == '2') {
                // 预览
                let fileUrls =
                    'https://view.xdocin.com/view?src=' + encodeURIComponent(items.fileUrl) + '&watermark=' + encodeURIComponent('三峡农夫 —— ' + items.fileName) + '&title=' + items.fileName
                // console.log(fileUrls)
                window.open(fileUrls)
            } else if (type == '3') {
                // 删除
                this.$confirm('确认删除文件?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ;(this as any).$request.postForm('/api/oa/file/delete', { fileId: items.fileId }).then((res: any) => {
                        if (res.code == 200) {
                            ;(this as any).$message.success('删除成功')
                            ;(this as any).queryData.page = publicFunction.setDeletePageNum((this as any).pageData.totalNum, (this as any).queryData.pageSize)
                            ;(this as any).getFiles()
                        }
                    })
                })
            }
            ;(this as any).rightClickData = ''
        },
        closeContextMenu(e: any) {
            ;(this as any).contextMenuData.isShow = false
            ;(this as any).rightClickData = ''
            if (e.which == 2 || e.which == 3) {
                e.returnValue = false
                return false
            }
        }
    }
})
</script>
<style lang="scss" scoped>
.pageHeader {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    .pageNameBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
        img {
            width: 14px;
            height: 14px;
            margin-right: 10px;
        }
        .pageName {
            color: #4064e1;
        }
        .headerBrns {
            margin-left: 30px;
        }
    }
    .pageStatistics {
        font-size: 12px;
        color: #999999;
        margin-left: 20px;
    }
}
.detailsBox {
    width: 100%;
    background: #ffffff;
    padding: 20px;
    margin-bottom: 30px;
    .detailsTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 25px;
        padding-bottom: 15px;
        .detailsText {
            font-weight: 600;
        }
        .titlesBrn {
            width: 100px;
        }
    }
    .filesBox {
        padding: 0 40px;
        .filesItems {
            display: inline-block;
            margin-bottom: 60px;
            width: 11.11%;
            // cursor: pointer;
            position: relative;
            padding: 5px;
            // &:hover {
            //     .functionMask {
            //         opacity: 1;
            //         // display: block;
            //     }
            // }
            .filesItemsImg {
                width: 80px;
                height: 80px;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }
            .filesItemsName {
                color: #333;
                text-align: center;
                margin-top: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            // .functionMask {
            //     position: absolute;
            //     width: 100%;
            //     height: 100%;
            //     background: rgba(0, 0, 0, 0.7);
            //     top: 0;
            //     left: 0;
            //     right: 0;
            //     bottom: 0;
            //     display: flex;
            //     justify-content: space-evenly;
            //     align-items: center;
            //     opacity: 0;
            //     // display: none;
            //     transition: all 0.2s;
            //     i {
            //         color: #ffffff;
            //         cursor: pointer;
            //         font-size: 18px;
            //     }
            // }
        }
    }
}
</style>
